<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">	
	<head>
		<title>CSS Writing Modes Test: text-orientation - mixed</title>
		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
		<link rel="help" title="5.1. Orienting Text: the‘text-orientation’property" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation" />
		<link rel="match" href="reftest/text-orientation-010-ref.xht" />
		<meta http-equiv="content-language" content="en, ja" />
		<meta name="flags" content="ahem font" />
		<meta name="assert" content="This test checks that 'text-orientation: mixed' causes characters from horizontal-only scripts are set sideways, i.e. 90°clockwise from their standard orientation in horizontal text. Characters from vertical scripts are set with their intrinsic orientation. This is effective to verify 1.block flow direction, 2.inline direction and 3.glyph orientation." />		
		<style type="text/css">
				@font-face
				{
					font-family: "mplus-1p-regular";
					src: url("support/mplus-1p-regular.woff") format("woff");
					/* filesize: 803300 bytes (784.5 KBytes) */
					/*
					mplus-1p-regular.ttf can be downloaded at/from [TBD later]
					*/
				}
				.view_ahem
				{
					background: pink;
					border: 1px solid black;
					color: blue;
					font: 20px/1 "Ahem";
					height: 3em;
					margin: 10px;        
					width: 3em;
					white-space: pre;
				}
				#test_ahem
				{
					text-orientation: mixed;				/* The property to be tested */
					writing-mode: vertical-rl;
				}
				#control_ahem
				{
					writing-mode: horizontal-tb;
				}
				.view 
				{
					border: 1px solid gray;
					font-family: "mplus-1p-regular";
					font-size: 1.5em;
					line-height: 1.5;
					margin-bottom: 10px;
					width: 3em;
					writing-mode: vertical-rl;
				}
				#test 
				{
					text-orientation: mixed;					/* The property to be tested */
				}
				#control 
				{
					text-combine-upright: none;
				}
		</style>
	</head>
	<body xml:lang="en">
		<!--
			This test consists of a pair of sub-tests which complements each other.
			Logically, the test should verify 1.block flow direction, 2.inline direction
			and 3.glyph orientation. The "Ahem" sub-test comes first and checks 1. and 2. , 
			whereas "glyph" sub-test comes later and also checks 3.
		-->
		<p>Test passes if a pair of rectangles is <strong>identical</strong> including <strong>layout</strong> and <strong>orientation</strong>.</p>
		<div class="view_ahem"><span id="test_ahem">123 
 56
7  </span></div>
		<div class="view_ahem"><span id="control_ahem">7 1
 52
 63</span></div>
		<hr />
		<div class="view" xml:lang="ja"><span id="test">月火水Abc<br />def木金土</span></div>
		<div class="view" xml:lang="ja"><span id="control">月火水Abc<br />def木金土</span></div>
	</body>
</html>
